<template>
    <div class="undone">
        <div class="all-order" v-for="(item, index) in toplist.data">
            <div class="text">
                <span>外卖订单：{{ item.id }}</span>
                <p>未付款</p>
            </div>
            <div class="all-box">
                <div class="area">
                    <h4>{{ area }}</h4>
                    <p>{{ item.time }}</p>
                </div>
                <div class="shop">
                    <p>{{ item.name }} </p>
                    <span>共{{ item.count }}件商品</span>
                </div>
                <div class="price">
                    <h5>￥{{ item.total }}</h5>
                    <div class="pay" @click="addShow(index)">
                        重新支付
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.undone {
    width: 100%;
    height: 1000px;
    background-color: #f8f8f8;

    .all-order {
        width: 95%;
        margin: .8rem auto 1rem;
        display: flex;
        flex-direction: column;

        .text {
            width: 100%;
            height: 2.5rem;
            line-height: 2.6rem;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            border-bottom: 1.2px solid #f8f8f8;

            span {
                font-size: 13.5px;
                color: #a6a6a6;
                margin-left: .8rem;
            }

            p {
                font-size: 13.5px;
                color: rgb(231, 13, 35);
                margin-right: .8rem;

            }
        }

        .all-box {
            width: 100%;
            height: 9rem;
            background-color: #fff;

            .area {
                margin-top: .65rem;
                display: flex;
                justify-content: space-between;
                align-items: center;

                h4 {
                    font-size: 15.5px;
                    color: #383838;
                    width: 50%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    white-space: nowrap;
                    margin-left: .8rem;
                }

                p {
                    margin-right: .8rem;
                    font-size: 12px;
                    color: #a6a6a6;
                }
            }
        }

        .shop {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: .5rem;

            p {
                margin-left: .8rem;
                font-size: 12px;
                width: 11.5rem;
            }

            span {
                margin-right: .8rem;
                font-size: 12.2px;
            }
        }

        .price {
            margin-top: 1.8rem;
            display: flex;
            justify-content: space-between;

            h5 {
                margin-left: .8rem;
                font-size: 16px;
                margin-top: .3rem;
            }

            .pay {
                margin-right: .8rem;
                font-size: 12px;
                padding: .2667rem .6333rem;
                border: 1px solid rgb(231, 13, 35);
                color: rgb(231, 13, 35);
                border-radius: 5px;
            }
        }
    }
}
</style>

<script lang="ts"  setup>
import store from '@/store';
import { ref, reactive } from 'vue';
import { undoneList, addressList, removeUndone, getFinishList, finishList } from '../../request'
import { showSuccessToast, showFailToast } from 'vant';
let address = ref('');

address.value = store.state.addressDetail;
console.log('aaaa', store.state.addressDetail);
let toplist: any = reactive({
    data: []
})

const undone = () => {
    undoneList().then((content: any) => {
        let { result } = content;
        let hot = result.map((item: any) => {
            let obj: any = {};
            obj.id = item.undone_id;
            obj.name = item.undone_name;
            obj.address = item.undone_address;
            obj.count = item.undone_count;
            obj.time = item.undone_time;
            obj.total = item.undone_total
            return obj
        })
        toplist.data = hot;

    }).catch(error => {
        console.log(error);
    })
}
undone()
let area = ref('')

addressList().then((content: any) => {
    console.log(content);
    let { result } = content;
    area.value = result[0].address_name
})
    .catch(error => {
        console.log(error);
    })



const detail = (index: any) => {
    // 删除订单
    removeUndone({ undone_id: toplist.data[index].id }).then(content => {
        console.log(content);
        undone()
    }).catch(error => {
        console.log(error);
    })
}


const addShow = (index: any) => {
    if (confirm('您确定再次支付了吗？')) {
        getFinishList({ finish_id: toplist.data[index].id, finish_name: toplist.data[index].name, finish_address: toplist.data[index].address, finish_count: toplist.data[index].count, finish_total: toplist.data[index].total, finish_time: toplist.data[index].time })
            .then((content: any) => {
                finishList()
                undone()
                detail(index)
            }).catch(error => {
                console.log(error);
            })

        showSuccessToast("支付成功")
    } else {
        showFailToast('支付失败');
        return
    }
}

</script>